import React from 'react'
import { Upload, Button, message, Input } from 'antd'
import { UploadOutlined, SelectOutlined } from '@ant-design/icons'

const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
        authorization: 'authorization-text',
    },
    onChange(info: any) {
        if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    },
};

export default () => {
    return (
        <div>
            <nav style={{ borderLeft: "3px solid #4685fd", paddingLeft: "5px", marginBottom: "20px" }}>商品图片</nav>

            <div style={{ width: "150px", height: "150px", border: "1px solid #E5E5E5" }}>
                <img src="http://uniapp.niuteam.cn/template/admin/public/images/album/default_goods_image_240.gif" alt="" style={{ width: "100%" }} />
            </div>
            <p style={{ color: "#c1c1c1", marginTop: "8px" }}>
                第一张图片将作为商品主图,支持同时上传多张图片,多张图片之间可随意调整位置；支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸800x800像素以上、大小不超过1M的正方形图片，上传后的图片将会自动保存在图片空间的默认分类中。
            </p>
            <div>
                <div style={{ display: "inline-block", width: "100px", marginRight: "20px" }}>
                    <Upload >
                        <Button><UploadOutlined /> 上传图片</Button>
                    </Upload>
                </div>

                <Button><SelectOutlined />  相册选择</Button>
            </div>

            <nav style={{ borderLeft: "3px solid #4685fd", paddingLeft: "5px", margin: "20px 0" }}>商品视频</nav>

            <video controls poster="http://uniapp.niuteam.cn//public/static/blue/img/goods_video_upload_bg.png" preload="auto" style={{ height: "170px", width: "290px" }}>
                <p>To view this video please enable JavaScript, and consider upgrading to a web browser that</p>
            </video>
            <div> 视频地址：<Input /></div>
            <div>
                注意事项：
                <ul style={{ listStyleType: "none", color: "#FF6600" }}>
                    <li>
                        1、检查upload文件夹是否有读写权限。
                    </li>
                    <li>
                        2、视频支持手动输入外链视频地址或者上传本地视频文件
                    </li>
                    <li>
                        3、 必须上传.mp4视频格式
                    </li>
                    <li>
                        4、 视频文件大小不能超过500MB
                    </li>
                </ul>
            </div>
        </div>
    );
}